<template>
  <div class="product">
    <div class="container">
      <div class="left">
        <img src="/imgs/mix-alpha.jpg" alt="">
      </div>
      <div class="right">
        <div class="row">
          <ul class="row-list">
            <li class="item" v-for="(item, index) in list" :key="'product' + index" @click="DropDetail(item.id)">
              <div class="img">
                <img v-lazy="item.mainImage" alt="error">
              </div>
              <p class="title">{{item.name}}</p>
              <p class="dec">{{item.subtitle}}</p>
              <span class="price">{{item.price}}</span>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import {getProduct} from "../../api/home";

export default {
  name: 'Index-Product',
  data () {
    return {
      list: [
        {
          id: 30,
          mainImage: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/d880ff45a9a3b70527770e01521fc939.jpg?thumb=1&w=200&h=200&f=webp&q=90',
          name: '小米10 至尊版',
          price: '5299元',
          subtitle: '120X 变焦/120W秒充/120Hz屏幕'
        },
        {
          id: 31,
          mainImage: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/3b19bf0e7e599c1bbbce510fb0dbc8bc.jpg?thumb=1&w=200&h=200&f=webp&q=90',
          name: 'Redmi K30 至尊版',
          price: '2999元',
          subtitle: '120Hz弹出全面屏，天玑1000+旗舰处理器'
        },
        {
          id: 32,
          mainImage: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/237942bfcaf2bbe82fbe966c2f584d69.jpg?thumb=1&w=200&h=200&f=webp&q=90',
          name: '小米9 6GB+128GB',
          price: '2999元',
          subtitle: '骁龙855，索尼4800万超广角微距'
        },
        {
          id: 45,
          mainImage: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/237942bfcaf2bbe82fbe966c2f584d69.jpg?thumb=1&w=200&h=200&f=webp&q=90',
          name: '小米9 6GB+128GB',
          price: '2999元',
          subtitle: '骁龙855，索尼4800万超广角微距'
        },
        {
          id: 1005,
          mainImage: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/237942bfcaf2bbe82fbe966c2f584d69.jpg?thumb=1&w=200&h=200&f=webp&q=90',
          name: '小米9 6GB+128GB',
          price: '2999元',
          subtitle: '骁龙855，索尼4800万超广角微距'
        },
        {
          id: 1006,
          mainImage: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/237942bfcaf2bbe82fbe966c2f584d69.jpg?thumb=1&w=200&h=200&f=webp&q=90',
          name: '小米9 6GB+128GB',
          price: '2999元',
          subtitle: '骁龙855，索尼4800万超广角微距'
        },
        {
          id: 1007,
          mainImage: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/237942bfcaf2bbe82fbe966c2f584d69.jpg?thumb=1&w=200&h=200&f=webp&q=90',
          name: '小米9 6GB+128GB',
          price: '2999元',
          subtitle: '骁龙855，索尼4800万超广角微距'
        },
        {
          id: 1008,
          mainImage: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/237942bfcaf2bbe82fbe966c2f584d69.jpg?thumb=1&w=200&h=200&f=webp&q=90',
          name: '小米9 6GB+128GB',
          price: '2999元',
          subtitle: '骁龙855，索尼4800万超广角微距'
        }
      ]
    }
  },
  methods: {
    DropDetail (id) {
      this.$router.push({
        name: 'detail',
        params: {id}
      })
    }
  },
  mounted () {
  }
}
</script>

<style lang="scss" scoped>
@import "src/assets/css/mixin";

@include container();

.product {
  background-color: #f5f5f5;
  height: 740px;
  box-sizing: border-box;
  margin-top: 60px;

  .container {
    display: flex;
    padding-top: 71px;

    .left {
      width: 224px;
      height: 619px;
      position: relative;

      &:hover {
        cursor: pointer;
      }

      img {
        width: 100%;
        height: 100%;
      }

      &:before {
        content: '手机';
        display: block;
        position: absolute;
        top: -40px;
        font-size: 22px;
        font-weight: bold;
        color: #343434;
      }
    }

    .right {
      flex: 1;
      height: 619px;
      overflow: hidden;

      .row {
        height: 619px;
        overflow: hidden;

        .row-list {
          display: flex;
          flex-wrap: wrap;
          align-items: stretch;
          height: 619px;

          .item {
            width: 24%;
            height: 302px;
            background-color: #ffffff;
            margin-left: 10px;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            position: relative;
            margin-bottom: 10px;

            &:hover {
              cursor: pointer;
            }

            .img {
              width: 190px;
              height: 195px;

              img {
                width: 100%;
                height: 100%;
              }
            }

            .title {
              font-size: 14px;
              font-family: FZLanTingHeiS-R-GB;
              font-weight: bold;
              color: #343434;
            }

            .dec {
              font-size: 12px;
              font-family: FZLanTingHeiS-R-GB;
              font-weight: bold;
              color: #9a9a9a;
              margin-top: 6px;
            }

            .price {
              font-size: 14px;
              font-family: FZLanTingHeiS-R-GB;
              font-weight: bold;
              color: #f20b0b;
              margin-top: 13px;
            }

            &:nth-child(2n-1) {
              &:before {
                content: '新品';
                position: absolute;
                top: 0px;
                left: calc(50% - 33px);
                width: 67px;
                height: 24px;
                background: #7ecf68;
                text-align: center;
                color: #ffffff;
                line-height: 24px;
              }
            }
          }

          &:nth-child(2) {
            margin-top: 15px;
          }
        }
      }
    }
  }
}
</style>
